<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>

        <my-head></my-head>
        <one></one>
        <hr>

        <parent
            id="2204"
            time="0606"
            msg="Game Over"
        ></parent>

    </div>

    <template id="parent">
        <div>
            <h2>parent-parent-父组件</h2>
            <h2 @click="id=1213">id={{id}}</h2>
            <h2>mag={{msg}}</h2>
            <h2>time={{time}}</h2>
            <hr>

            <childone
                :city="city"
                :area="area"
                :address="address"
                :name="name"
                date="0605"
            ></childone>
            <hr>
            
            <childtwo 
                user-name="LiP"
                :prop-a="propa"
                :prop-b="propb"
                :prop-c="propc"
                :prop-d="propd"
            ></childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone----1-子组件</h2>
            <h2>地址：{{city}}-{{area}}--{{address}}-{{name}}-{{date}}</h2>
        </div>
    </template>


    <template id="childtwo">
        <div>
            <h2>childtwo - childtwo - 2 - 子组件 </h2>
            <h2>username=   {{userName}}</h2>
            <h2>propA=   {{propA}}</h2>
            <h2>propB=   {{propB}}</h2>
            <h2>propC=   {{propC}}</h2>
            <h2>propD = {{propD}}</h2>


        </div>
    </template>

    <script>
        Vue.component('myHead',{
            template:'<h2>假期结束啦</h2>'
        })

        Vue.component('parent',{
            template:'#parent',
            props:['id','time','msg'],//接受外部传入的props
            components:{
                childtwo:{
                   template:"#childtwo",
                   props:{  // Prop的正则 
                       userName:String,  // 类型定义 
                       propA:{
                           type:[String,Boolean] 
                       },
                       propB:{
                           type:Number,
                           default:10000
                       },
                       propC:{
                           type:String,
                           default(){
                               return "I am OK "
                           }
                       },
                       propD:{
                           type:Object, 
                       }
                   }
                }
            },
            data(){
                return{
                    city:'武汉市',
                    area:'江夏区',
                    address:"金融港B18栋",
                    name:"千锋教育",
                    propa:true,
                    propb:1212,
                    propc:'who are you ',
                    propd:{
                        id:1,
                        msg:'就这',
                        name:'LP'
                    }
                }
            },
            mounted(){
                console.log(this.msg,this.id,this.time )
            }
        })

        Vue.component('childone',{
            template:'#childone',
            props:['city','address','name','area','date']
        })




        const vm =new Vue({
            el:'#app',
            data:{
                title:'Vue 组件属性 Props'
            },
            components:{
                one:{
                    template:'<h2>one---one</h2>'
                }
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML=this.title;
            },
        })

    </script>
     <!-- 
        <A>
            <B></B>
        </A>
        props  组件接受的外部数据   read-only 

        通过 Prop 向子组件传递数据  单向数据流   

        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   
        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号
     -->
</body>
</html>